<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现淘宝式多级选择菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
body *{
font-size:14px;
margin:0;
padding:0;
}
#wrapper{
clear:both;
width:778px;
height:220px;
background-color:#FFF;
margin-bottom:8px;
}
#wrapper ul{
margin:0 3px 0 0;
padding:0;
border:1px solid #CCC;
float:left;
width:189px;
height:218px;
overflow:auto;
}
#wrapper ul.Blank{
background-color:#F6F6F6;
}
#wrapper li{
list-style-type:none;
width:auto;
height:20px;
margin:0 1px !important;
margin /**/:0 1px 0 -15px;
padding:0;
border:1px solid #FFF;
line-height:20px;
color:#444;
text-indent:3px;
cursor:default;
}
#wrapper li.Selected{
background-color:#CAFFC0;
border:1px solid #0A9800;
color:#006623;
}
#wrapper li.IsParent{
background-image:url(/uploads/allimg/1110/publishitem_subcate_arrow.gif);
background-position:99% 50%;
background-repeat:no-repeat;
}
#wrapper li.RecentUsed{
color:#170;
}
#titleType{
clear:both;
width:778px;
background-color:#FFF;
}
#titleType ul{
float:left;
}
#titleType li{
margin:0 3px 0 0;
float:left;
border:1px solid #CCC;
width:189px;
color:#0063C8;
font-weight:bold;
border-bottom:0px;
height:23px;
line-height:23px;
}
</style>

</head>
<body>
<div id="titleType">
	<ul id="title">
		<li>请选择品牌</li>
		<li>请选择折扣和服务</li>
		<li>请选择价格区间</li>
		<li>请选择材质</li>
	</ul>
</div>
<div id="wrapper">
	<ul id="brandType" class="Blank">
	</ul>
	<ul id="serviceType" class="Blank">
	</ul>
	<ul id="rangeType" class="Blank">
	</ul>
	<ul id="quanlityType" class="Blank">
	</ul>
</div>
</body>
<script language="javascript" type="text/javascript" id="commonjs">
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e){
	var re = new RegExp(this.S+e+this.S);
	return re.test(this.S+this.join(this.S)+this.S);
}
function getTriggerNode(e) {
	return (document.all)?event.srcElement:e.target;
}
function getObj(id){
    return document.getElementById(id);
}

//初始化数据
var brandTypeData = new DataInfo();//品牌数据
brandTypeData.addData("与狼共舞",1,'','');
brandTypeData.addData("花花公子",2,'','');

var serviceTypeData = new DataInfo();//折扣和服务数据
serviceTypeData.addData("全球购",1,'','');
serviceTypeData.addData("天猫",2,'','');

var rangeTypeData = new DataInfo();//价格区间数据
rangeTypeData.addData("全球购",1,["0-50","50-120"],[1,2]);
rangeTypeData.addData("天猫",2,["0-100","100-200"],[3,4]);

var quanlityTypeData = new DataInfo();//材质数据
quanlityTypeData.addData("0-50",1,["棉","麻","蚕丝"],[1,2,3]);
quanlityTypeData.addData("50-120",2,["薄纱","棉布"],[4,5]);
quanlityTypeData.addData("0-100",3,["棉","麻","蚕丝"],[6,7]);
quanlityTypeData.addData("100-200",4,["薄纱","棉布"],[8,9]);


function DataNode(){
	this.parent;	
	this.parentId;
	this.Children;	
	this.childrenId;
}
function DataInfo(){
	this.mList = new Array();
	this.ListCount = function(){return this.mList.length;}
	this.GetListObj = function(n){
		if (n<this.ListCount()) return this.mList[n];
		return null;
	}
	this.addData = function(sParent,sParentId,sChildren,sChildrenID){
		obj = new DataNode();
		obj.parent	 = sParent;
		obj.parentId = sParentId;
		obj.children = sChildren;
		obj.childrenId = sChildrenID;
		this.mList[this.ListCount()] = obj;
	}
}

//构建菜单列表
function buildMenuList(objName,objData,objSelected){
    console.log(objName);
    console.log(objData);
    console.log(objSelected);
	//buildMenuList(["rangeType",quanlityTypeData],rangeTypeData,[parentId,0]);
	var menuType = getObj(objName[0]);//单击的当前菜单
	if(!menuType) return;
	var strOutput = "";
	var liClass = "";
	var id = 0;
	var op_txt = new Array();
	var op_val = new Array();
	var sub_val = new Array();//子节点数组
	if (objSelected[0]){//父节点
	    for(i=0;i<objData.ListCount();i++){
			if(objData.GetListObj(i).parentId==objSelected[0]){//判断子节点的父亲
				console.log('objSelected[0]='+objSelected[0]);
				id = i;
				break;
			}
			if(i==objData.ListCount()){
				menuType.innerHTML="";
				menuType.className="Blank";
				return false;
			}
	   }
    }
	if(objName[1]){//说明有子节点,存放子节点的父亲id
	    for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).parentId));
	 }
     console.log(id);
	tmpobj = objData.GetListObj(id);//取出当前节点
	console.log(tmpobj);
	if (tmpobj.children.length==0){//孩子节点长度为0
		for(i=0;i<objData.ListCount();op_txt.push(objData.GetListObj(i).parent),op_val.push(objData.GetListObj(i++).parentId));
	}else{
		op_txt = tmpobj.children;//孩子对象
		op_val = tmpobj.childrenId;//孩子id
	}
	for(i=0;i<op_txt.length;i++){
		if(sub_val.in_array(op_val[i])){
			liClass = "IsParent";//是父节点
		}
		if(op_val[i] == objSelected[1]){
			liClass += " Selected";//选中
		}
		strOutput += '<li id="'+objName[0]+'__'+op_val[i]+'" class="'+liClass+'">'+op_txt[i]+'</li>';
		liClass = '';
	}
	menuType.innerHTML = strOutput;
	strOutput = "";
	menuType.className="";
}

//菜单切换联动效果
var menuSelect = [];
function changeMenu(evnt){
	var obj = getTriggerNode(evnt);
	var objSource = obj;

    //获取父节点
	while(objSource.nodeName != "UL"){
		objSource = objSource.parentNode;
	}

	//切换菜单选中样式
    var ulId = objSource.id;
	if(menuSelect[ulId]){
		menuSelect[ulId].className=menuSelect[ulId].className.replace("Selected","");
	}
	obj.className += " Selected";
	menuSelect[ulId] = obj;
    //创建子节点
    console.log(obj.id);
	var parentId = (obj.id).split("__")[1];
	if(objSource.id=="serviceType"){
       buildMenuList(["rangeType",quanlityTypeData],rangeTypeData,[parentId,0]);
	}else if(objSource.id=="rangeType"){
       buildMenuList(["quanlityType",],quanlityTypeData,[parentId,0]);
	}
	
}

buildMenuList(["brandType",],brandTypeData,[0,0]);
buildMenuList(["serviceType",rangeTypeData],serviceTypeData,[0,0]);
getObj("wrapper").onclick = changeMenu;
</script>
</html>